body{  
 
      font-family: Arial, sans-serif; 
    
   
  }  
    #menu img{
      width: 30%;
      height: 40%;

    }
 
#products, #cart {  
    
    width: 100%;
    height: auto;
    font-size: 1vw;  
    
}  
  
.product {  
    margin-bottom: 10px;  
}  
.product button{
    font-size: 1vw;
}
.add-to-cart {  
    margin-top: 5px;  
}  
  
#cart-items li {  
    list-style: none;
    margin-top: 10%;  
    margin-bottom: 1%;  
    font-size: 1vw;
}
.styled-text{
    color:red;
    font-size: 20px;
}
#navbar {  

    top: 0; 
    right: 0; 
    width: 100%; 
    background-color: rgba(255, 255, 255, 0.3); 
    color: #101012;  
    padding: 1% 0; 
    margin-bottom: 30%;
    
}  
#navbar nav{
  margin-top: -1%;
  font-size: 1vw;
}

#navbar nav ul {  
    list-style-type: none; 
    margin: 0;  
    padding: 0;  
    display: flex;
  
}  
  
#navbar nav ul li a {  
    text-decoration: none; 
    color: inherit;  
}	
#navbar nav ul li a:hover {  
                color: rgb(227, 115, 29); 
            }
            #drawer {  
              position: fixed;  
              top: 0;  
              left: -50%; 
              width: 50%;  
              height: 100%;
              background-repeat: no-repeat;
              background-size: cover;
              color: #0eb2aa;  
              transition: left 0.5s ease;
              overflow: auto;  
             
          }  
       
            
          #drawer.open {  
              left: 0; 
          }  
            
          #drawer ul {  
              list-style: none;  
              padding: 0;  
              margin: 0;  
          }  
            
          #drawer li a {  
              font-size: 150%;
              color: #7632dc;  
              display: block;  
              padding: 2%;  
              text-decoration: none;  
          }  
            
          #drawer li a:hover {  
              background-color: #555;  
          }
         
            .dropdown {  
                position: relative;  
                display: inline-block;  
                
              }  
                
           
              .dropdown-content {  
                display: none;  
                position: absolute;  
                background-color: #f9f9f9;  
                min-width: 160px;  
                box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);  
                padding: 12px 16px;  
                z-index: 1;  
              }  
                
           
              .dropdown-content a {  
                color: black;  
                padding: 12px 16px;  
                text-decoration: none;  
                display: block;  
              }  
              .dropdown-content a:hover{
                color: #ff3c00;
              }
                
       
              .dropdown:hover .dropdown-content {  
                display: block;  
               
              }
              .dropbtn{
                color: #101012; 
                text-decoration: none; 
              }
              .dropbtn:hover{
                color: rgb(227, 115, 29); 
              }
              .dropdown1 {  
                position: relative;  
                display: inline-block;  
                
              }  
                
           
              .dropdown-content1 {  
                display: none;  
                position: absolute;  
                background-color: #f9f9f9;  
                min-width: 160px;  
                box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);  
                padding: 12px 16px;  
                z-index: 1;  
              }  
                
           
              .dropdown-content1 a {  
                color: black;  
                padding: 12px 16px;  
                text-decoration: none;  
                display: block;  
              }  
              .dropdown-content1 a:hover{
                color: #ff3c00;
              }
                
       
              .dropdown1:hover .dropdown-content1 {  
                display: block;  
               
              }
              .dropbtn1{
                color: #101012; 
                text-decoration: none; 
              }
              .dropbtn1:hover{
                color: rgb(227, 115, 29); 
              }
              
              .dropdown2 {  
                position: relative;  
                display: inline-block;  
                
              }  
                
           
              .dropdown-content2 {  
                display: none;  
                position: absolute;  
                background-color: #f9f9f9;  
                min-width: 160px;  
                box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);  
                padding: 12px 16px;  
                z-index: 1;  
              }  
                
           
              .dropdown-content2 a {  
                color: black;  
                padding: 12px 16px;  
                text-decoration: none;  
                display: block;  
              }  
              .dropdown-content2 a:hover{
                color: #ff3c00;
              }
                
       
              .dropdown2:hover .dropdown-content2 {  
                display: block;  
               
              }
              .dropbtn2{
                color: #101012; 
                text-decoration: none; 
              }
              .dropbtn2:hover{
                color: rgb(227, 115, 29); 
              }

              .footer{
                width: 100%;
                height: 30%;
                margin-left: 0%;
                margin-top: 2%;
                font-size: 155%;
              font-family: Arial, Helvetica, sans-serif;
              background-color: rgba(255, 255, 255, 0.6); 
                color: #000000;
              align-items: center;
              justify-items: center;
             
            }
           
            
            .footer pre b a{
              text-decoration: none;
              color: #202024;
            }
            .footer pre b a:hover{
              color: #d64713;
            }

            #pay{
              display: none;
              margin-top: 10%;
            }

            .modal {  
            
              position: fixed;  
              top: 0;  
              left: 0;  
              width: 100%;  
              height: 100%;  
              background-color: rgba(0, 0, 0, 0.5);  
              display: flex;  
              justify-content: center;  
              align-items: center;  
          }  
        
          .modal-content {  
            
              background-color: #fff;  
              padding: 2px; 
              width: 50%; 
              border-radius: 5px;  
          }  
        
          .close-btn {  
            
              float: right;  
              font-size: 20px;  
              font-weight: bold;  
              cursor: pointer;  
          } 